import React,{PropTypes} from 'react'
import {connect} from 'react-redux'
import {FormattedNumber, FormattedPlural} from 'react-intl'
import ReactEcharts from 'echarts-for-react';
import RComponent from '../../components'
import styles from './assetsConfig.scss'
import Dtip from '../../components/Dialog/dtip.js'
import FormDialog from '../../components/Dialog/formDialog.js'
import _ from 'lodash';
import Nav from './nav.js'
import PopUp from './popup.js'
import {setTitle} from '../../actions/page'
import Sdc from '../../components/sdc'

class AssetsConfig extends RComponent{
    constructor(props, context){
        super(props, context);

        this.sysPlan = {
            "allcateType":"6",
            "allocation":[
                {"assetId":"16","assetName":"类 1","color":"cc0099","percentage":"19.80",
                    "products":[
                        {"productCode":"PA3012"}
                    ],"rate":"2.77","shortName":"类 1"
                },
                {"assetId":"11","assetName":"类 2","color":"7093cb","percentage":"7.44",
                    "products":[
                        {"productCode":"519983"},
                        {"productCode":"590008"}
                    ],"rate":"11.43","shortName":"类 2"
                },
                {"assetId":"17","assetName":"(类)3","color":"f5be76","percentage":"45.67",
                    "products":[
                        {"productCode":"200013"},
                        {"productCode":"485111"}
                    ],"rate":"3.59","shortName":"(类)3"
                },
                {"assetId":"13","assetName":"另类","color":"BFE3FE","percentage":"19.02",
                    "products":[
                        {"productCode":"001335"},
                        {"productCode":"001229"}
                    ],"rate":"8.33","shortName":"另类"
                },
                {"assetId":"14","assetName":"类 5","color":"009999","percentage":"8.07",
                    "products":[
                        {"productCode":"161116"}
                    ],"rate":"5.01","shortName":"类 5"
                }
            ],
            "date":"1469163775626",
            "flux":84,
            "investAsset":"50000",
            "label":"X型",
            "purchas":17,
            "risk":17,
            "userproperty":"11",
            "valueAtRisk":"13.55480",
            "volatility":"8.24",
            "yield":"5.03"
        };
        this.pieData = _.filter(this.sysPlan.allocation,function(i){
            // console.log(i.percentage)
            i.value = i.percentage;
            return i;
        });

        this.state = {
            botVisible:false,
            varVisible:false,
            popupVisible:false,
            currentPlan:this.sysPlan
        }
    }

    componentDidMount(){
        // 设置页面头部
        this.props.dispatch(setTitle({title:'page1',showHome:true}))
    }

    getOption(){
        let data = this.sysPlan;
        let option = {
            radar: {
                radius:"60% 1%",
                center: ['50%', '52%'],
                splitNumber: 3,
                nameGap: 8,
                name: {
                    textStyle: {
                        color: '#af292e',
                        fontSize:'0.5rem',
                    }
                },
                splitArea: {
                    show: false
                },
                height:'90px',
                indicator: [
                    { name: 'flux', max: 100, min: 0 },
                    { name: 'purchas', max: 100, min: 0 },
                    { name: 'risk', max: 100, min: 0 }
                ]
            },
            series: [{
                type: 'radar',
                symbol: 'none',
                areaStyle: {
                    normal: {
                        opacity: 0.08
                    }
                },
                data: [{
                    value: [data.flux||data.fluxAft, data.purchas||data.purchasAft, data.risk||data.riskAft],
                }]
            }]
        }
        return option
    }

    onChartReady(chart){
        setTimeout(function() {
            chart.hideLoading();
        }, 3000);
    }


    toggleBotTip(e){
        // console.log(e.target)
        if(this.state.varVisible){
            this.setState({botVisible:!this.state.botVisible,varVisible:!this.state.varVisible})
        }else{
            this.setState({botVisible:!this.state.botVisible})
        }
    }
    toggleVarTip(e){
        // console.log(e.target)
        if(this.state.botVisible){
            this.setState({varVisible:!this.state.varVisible,botVisible:!this.state.botVisible})
        }else{
            this.setState({varVisible:!this.state.varVisible})
        }
    }

    toggleForm(){
        this.setState({formDialogVisible:!this.state.formDialogVisible})
    }
    cancelSaveInvest(){
        this.setState({formDialogVisible:false})
    }
    saveInvestSum(){
        console.log('submit...')
        this.setState({formDialogVisible:false})
    }

    togglePopup(){
        console.log('show')
        // this.setState({popupVisible:true})
    }
    hidePupup(){
        this.setState({popupVisible:false})
    }

    render(){
        let pieoption = {
            series: [
                {
                    name:'pie',
                    type:'pie',
                    radius: ['55%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:this.pieData
                }
            ]
        };

        return (
            <Sdc className='Page-body' type='page' label='12020101-page1' event='page1'>
                <Nav />

                <div className="two-invest">
                    <div className="two-invest-left">
                        <div className="radar_chart" onClick={this.togglePopup.bind(this)}>
                            <ReactEcharts
                                option={this.getOption()}
                                onChartReady = {this.onChartReady}

                                className='radar_img'
                            />
                        </div>
                        <div className="radar_text">
                            <span>{'tzdr'}</span>
                            <Dtip />
                        </div>
                    </div>
                    <div className="two-invest-right verticalAlign">
                        <div className="verticalAlignItem">
                            <h2>Total</h2>
                            <div className="invest-sum">
                                ￥<FormattedNumber value={this.props.sum?this.props.sum:50000} />
                                <FormDialog
                                    fstyle={this.state.formDialogVisible?'block':'none'}
                                    title="设置您的金额"
                                    onClick={this.toggleForm.bind(this)}
                                    onCancel={this.cancelSaveInvest.bind(this)}
                                    onSubmit={this.saveInvestSum.bind(this)}
                                    />
                            </div>
                        </div>
                    </div>
                </div>

                <div className="two-pie pei-tex-all ">
                    {/*<!-- 圆圈图 -->*/}
                    <div className="two-pie-chart">
                        <ReactEcharts
                            option={pieoption}
                        />
                    </div>

                    {/*<!-- 图标中间文字 -->*/}
                    <div className="pie-rates">
                        <div className="pie-profit valignBottom">
                            <div className="valignBottomItem">
                                <div className="pie-profit-title">
                                    predict<span className="pi-icon pi-icon-barchart"></span>
                                </div>
                                <div className="pie-profit-p">
                                    <FormattedNumber
                                        value={ (this.props.yield?this.props.yield:0.0503)*100 }
                                        style='decimal'
                                    />
                                    <em>%</em>
                                </div>
                            </div>
                        </div>
                        <div className="pie-rate-text">
                            <div className="pie-rate-bot">
                                <div className="pie-profit-title">bo
                                    <Dtip
                                        dstyle="-5.25rem"
                                        title="bo"
                                        message="bo是对资产收益率不确定性的衡量，用于反映资产配置组合的风险水平。bo越高，资产配置组合的波动越剧烈。"
                                        visible={this.state.botVisible?true:false}
                                        onClick={this.toggleBotTip.bind(this)} />
                                </div>
                                <div className="pie-rate-p">
                                    <FormattedNumber
                                    value={ (this.props.yield?this.props.volatility:0.0824)*100 }
                                    style='decimal'
                                    />
                                    <em>%</em>
                                </div>
                            </div>
                            <div className="pie-rate-var">
                                <div className="pie-profit-title">VaR
                                    <Dtip
                                        dstyle="-11.25rem"
                                        title="VaR"
                                        message="即在险价值，表示在一定概率水平下（此处为95%），资产组合价值在未来一定时期内的最大可能损失。"
                                        visible={this.state.varVisible?true:false}
                                        onClick={this.toggleVarTip.bind(this)} />
                                </div>
                                <div className="pie-rate-p">
                                    <FormattedNumber
                                    value={ (this.props.yield?this.props.valueAtRisk:0.1355)*100 }
                                    style='decimal'
                                    />
                                    <em>%</em>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/*<!-- 自定义按钮 -->*/}
                    <div className="pie-btn-box">
                        <a className="pie-btn-custom"><i className="pi-icon pi-icon-arrow-left"></i>自定义</a>
                    </div>
                </div>

                <div className="two-classNameify">
                    <div className="th">
                        <div className="cell">大类</div>
                        <div className="cell">比重</div>
                        <div className="cell">历史年化收益</div>
                    </div>
                    <div className="td">
                        <div className="cell color">
                            <i className="pi-icon pi-category" style={{ background:'#cc0099' }}></i>
                            类1
                        </div>
                        <div className="cell">19.80%</div>
                        <div className="cell">2.77%</div>
                    </div>
                    <div className="td">
                        <div className="cell color">
                            <i className="pi-icon pi-category" style={{ background:'#7093cb' }}></i>
                            类2
                        </div>
                        <div className="cell">7.44%</div>
                        <div className="cell">11.43%</div>
                    </div>
                    <div className="td">
                        <div className="cell color">
                            <i className="pi-icon pi-category" style={{ background:'#f5be76' }}></i>
                            类3
                        </div>
                        <div className="cell">45.67%</div>
                        <div className="cell">3.59%</div>
                    </div>
                    <div className="td">
                        <div className="cell color">
                            <i className="pi-icon pi-category" style={{ background:'BFE3FE' }}></i>
                            类4
                        </div>
                        <div className="cell">19.02%</div>
                        <div className="cell">8.33%</div>
                    </div>
                    <div className="td">
                        <div className="cell color">
                            <i className="pi-icon pi-category" style={{ background:'#009999' }}></i>
                            类5
                        </div>
                        <div className="cell">8.07%</div>
                        <div className="cell">5.01%</div>
                    </div>
                </div>

                <div className="two-btnbox">
                    <Sdc type="button" event="page1" label="1201010107-下一步" className="inblock">
                        <button className='pi-btn pi-btn-block pi-btn-lg pi-btn-br-red'><i>下一步</i>查看产品</button>
                    </Sdc>
                </div>

                <PopUp visible={this.state.popupVisible?true:false}
                    currentPlan={this.currentPlan}
                />
            </Sdc>

        )
    }

}
AssetsConfig.propTypes = {

}
export default connect(
    state => state
)(AssetsConfig)
